<template>
  <div class="user">
    <Title/>
    <div class="listName" v-for="item in records" :key="item.id">
      <ul  @click="chagnCom(item.id)">
        <li>
          客户名称
          <span>{{item.custName}}</span>
        </li>
        <li>
          联系方式
          <span>{{item.telephone}}</span>
        </li>
        <li>
          公司名称
          <span>{{item.company}}</span>
        </li>
        <li> 
          职务    
          <span>{{item.position}}</span>
        </li>
      </ul>
      <div class="btn">
          <van-button round type="info" size="small" to="/visitadd">新增拜访</van-button>
          <van-button round type="info" size="small" to="/VisitRecord">拜访记录</van-button>
        </div>
    </div>
    <div class="drop-down" @click="addFn">查看更多</div>
  </div>
</template>
 
<script>
import Title from "../../components/Title";
import { GetTokenAPI, getCust } from "../../request/api";
export default {
  data() {
    return {
      records: [],
      size: 3,
    };
  },
  created() {
    // console.log(this.$refs.ming);
    getCust({
      keyword: "",
      current: 1,
      size: this.size,
    }).then((res) => {
      console.log(res.data);
      if (res.errCode == 0) {
        console.log(res);
        let { records } = res.data;
        this.records = records;
      }
    });
  },
  methods: {
    addFn() {
      this.size += 3;
      getCust({
        keyword: "",
        current: 1,
        size: this.size,
      }).then((res) => {
        console.log(res.data);
        if (res.errCode == 0) {
          console.log(res);
          let { records } = res.data;
          this.records = records;
        }
      });
    },
    chagnCom(id){
      this.$router.push("/compile/" +id);
      }
  },
  components: {
    Title,
  },
};
</script>
 
<style lang = "less" scoped>
.user {
  background: #f5f5f5;
  position: relative;

  .listName {
    margin-top: 5px;
    background: #fff;
    width: 100%;
    overflow: hidden;
    ul{
      margin-top: 5px;
      padding: 5px 0;
    }
    li {
      margin-top: 5px;
      color: #ccc;
      margin: 5px 10px;
      font-size: 14px;

      span {
        color: #000;
        margin-left: 15px;
      }
    }
  }
  .btn {
    width: 100%;
    height: 50px;
    border-top: 1px solid #f5f5f5;
    /* border-bottom: 1px solid #f5f5f5; */
    line-height: 50px;
    background: #fff;
    position: relative;
    .van-button {
      position: absolute;
      left: 200px;
      top: 50%;
      transform: translate(0, -50%);
    }
    .van-button:nth-child(2){
      left: 275px;
    }
  }
  .drop-down {
    width: 100%;
    height: 50px;
    line-height: 50px;
    background: #fff;
    margin-top: 20px;
    text-align: center;
    color: #369eff;
    border-bottom: 1px solid #f3f3f3;
  }
}
</style>